<template>
	<div class="goodslist">
		<!-- 商品浏览 -->
		<router-link class="item" v-for="item in goodsList" :key="item.id" :to="'/home/goodsInfo/'+item.id" tag="div">
			<img :src="item.img_url"/>
			<h1 class="hea">{{item.title}}</h1>
			<div class="content">
				<p>
					<span class="now">￥{{item.sell_price}}</span>
					<span class="old">￥{{item.market_price}}</span>
				</p>
				<p class="info">
					<span>热卖中</span>
					<span>剩{{item.stock_quantity}}</span>
				</p>
			</div>
		</router-link>
		
		<!-- 加载更多 -->
		<mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
		
		
		
	</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	export default{
		data() {
			return {
				
				index: 1,
				goodsList:[]
			}
		},
		created() {
			this.getGoodsList()
		},
		methods:{
			getGoodsList(){
				this.$http.get('http://www.liulongbin.top:3005/api/getgoods?pageindex='+this.index).then(data => {
					if(data.body.status===0){
						
						this.goodsList=this.goodsList.concat(data.body.message)
					}
				})
			},
			getMore(){
					this.index++
					this.getGoodsList()
			}
			
		}
	}
</script>

<style scoped="scoped">
	.goodslist{
		display: flex;
		flex-wrap: wrap;
		padding: 5px;
		justify-content: space-between;
		
	}
	.hea{
		font-size: 14px;
		/* width: 100px; */
		word-wrap: break-word;
		/* width: 49%; */
	}
	.item{
		width: 49%;
		border: 1px solid #ccc;
		margin: 1px;
		box-shadow: 0 0 7px #CCCCCC;
		padding: 3px;
		display: flex;
    flex-direction:column;
    justify-content: space-between;
    min-height: 250px;
	}
	img{
		width: 100%;
		
	}
	.content{
		background-color: #EEEEEE;
		
	}
	p{
		padding: 0px;
		margin: 0px;
		
	}
	.now{
		font-size: 16px;
		font-weight: bold;
		color: red;
	}
	.old{
		font-size: 12px;
		margin-left: 10px;
		text-decoration: line-through;
	}
	.info{
		display: flex;
		justify-content: space-between;
	}
</style>
